<script setup lang="ts">
import { openDepositFn } from '~/components-business/global-popups/newWallet/ts/depositBonusInfoHook';
</script>

<template>
  <div class="bg grid grid-cols-[auto_1fr] w-full items-center pt-10 text-left lt-tablet:(grid-cols-1 pb-5 text-center) -mt-$main-base-margin">
    <div>
      <p class="text-5.5 text-sys-text-body lt-tablet:text-4">
        {{ $t('pGnr20qtkU5TyOgJSg4Zc') }} / {{ $t('go9jYyJpa33AbfWAey7c8') }}
      </p>
      <I18nT keypath="fh99TirAje_6XkhuH7hSa" tag="div" class="whitespace-pre-line py-2.5 text-12 font-900 lt-tablet:text-9">
        <template #label>
          <span class="text-brand">{{ $t('krQe0NJm8jlSREfdWlj5') }}</span>
        </template>
      </I18nT>
      <div class="mt-7.5 flex items-center gap-6 lt-tablet:(mt-5 flex-col)">
        <AButton
          class="ant-cover__Button-3d-primary min-w-50" type="primary"
          @click="openDepositFn()"
        >
          {{ $t('2Wz7n5Gk1NiLxcall6eBg') }}
        </AButton>
      </div>
    </div>
    <div class="text-right lt-tablet:(mt-5 flex-center)">
      <img src="../../imgs/banner.png" alt="" class="h-90 lt-tablet:h-65">
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg {
  background: radial-gradient(50% 50% at 50% 0%, #3e404c 0%, #1d1e24 100%);
}
</style>
